<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq手风琴</title>
		        <style>

            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .title{
                height: 50px;
                line-height: 50px;
            }
            .menu_item{
              /*  overflow: hidden;*/
                width: 200px;
                border: 1px solid gray;
                padding-left: 20px;
            }
           .menu_item ul{
                /*transition: all 1s;*/
               display: none;
                
            }
            .menu_item li{
                height: 50px;
                line-height: 50px;
            }
            /*.menu_item ul.hidden{
                height: 0;
            }*/
        
        </style>
	</head>
	<body>
		 
        <div class="menu">

            <div class="menu_item">
                <h3 class="title">title</h3>
                <ul class="hidden">
                    <li>规则</li>
                    <li>招商</li>
                    <li>链接</li>
                    <li>规则</li>
                    <li>招商</li>
                    <li>链接</li>
                </ul>
            </div>

            <div class="menu_item">
                <h3 class="title">title</h3>
                <ul class="hidden">
                    <li>规则</li>
                    <li>招商</li>
                    <li>链接</li>
                </ul>
            </div>


            <div class="menu_item">
                <h3 class="title">title</h3>
                <ul class="hidden">
                    <li>规则</li>
                    <li>招商</li>
                    <li>链接</li>
                </ul>
            </div>

        </div>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			$(".menu").on("click",".menu_item",function(){
//				//判断高度是否为0
////				if ($(this).find("ul").height()) {
////					$(this).find("ul").css({"height":"0px"})
////				}else{
////				var fullHeight =$(this).find("li").length*$(this).find("li").outerHeight();
////				$(this).find("ul").css({"height":fullHeight+"px"})			
//			
//			
//			
//			
//
//				
//
//				
////				if ($(this).find("ul").height()!==0) {
////					$(this).find("ul").css({"height":0+"px"})
////				}
//				})
 			$(".title").on("click",".hidden",function(){
 				$(this).slideToggle()
 			})
			  
			  
			
			
		</script>
	</body>
</html>
